{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"_Notes from Jan 26, 2015, CS110 Introduction to Computing, Bryn Mawr College. [Douglas Blank](mailto:dblank@cs.brynmawr.edu)._"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 1. What can you do with Processing?"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Some examples:\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"* [my twitter likes](https://twitter.com/favorites) @DougBlank\n",
"* http://www.openprocessing.org/\n",
"* https://processing.org/examples/\n",
"\n",
"Now, let's see what you can do! [Assignment #1](http://jupyter.cs.brynmawr.edu/hub/dblank/public/CS110%20Intro%20to%20Computing/2015/Assignments/Assignment1.ipynb)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 2. Jupyter and Processing"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 2.1 Jupyter"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Jupyter is the name of the system that you log into. It is running on a server at Bryn Mawr College. It allows you to run code in a variety of programming languages inside things called \"notebooks.\" Each notebook is made up of cells. Cells can have text (called \"markdown\", like this text).\n",
"\n",
"You can turn on spell-checking by clicking the button in the toolbar.\n",
"\n",
"You can control how a cell is treated (code or markdown) by selecting from the picklist in the toolbar.\n",
"\n",
"You can also put code in a cell, like this:"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_11\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_11\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_11\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_11\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
\n",
" Sketch #11: \n",
" \n",
"
\n",
"
\n",
" \n",
" \n",
" \n",
" \n",
"
\n",
"Sketch #11 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fill(0);\n",
"text(\"This is a sketch\", 10, 15);\n",
"text(\"You can write\", 10, 30);\n",
"text(\"and draw:\", 10, 45);\n",
"fill(255, 0, 0);\n",
"ellipse(50, 75, 25, 25);"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: [Jupyter Notebook Users Manual](http://jupyter.cs.brynmawr.edu/hub/dblank/public/Jupyter%20Notebook%20Users%20Manual.ipynb).\n",
"\n",
"Tips:\n",
"\n",
"* You can press `SHIFT+TAB` after a name to get help on it\n",
"* you can press `TAB` after a few letters to complete the variable or function \n",
"\n",
"You can create text with headings, styles, and even create equations, like:\n",
"\n",
"$$ \\left(\\!\n",
" \\begin{array}{c}\n",
" n \\\\\n",
" r\n",
" \\end{array}\n",
" \\!\\right) = \\frac{n!}{r!(n-r)!} $$\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 2.2 Processing"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Processing is a programming language. You write programs as \"sketches.\" Each sketch goes into a Jupyter cell.\n",
"\n",
"The **syntax** of the Processing language is a subset of the Java programming language. After you write a sketch (a program) in Processing, there are a number of things that you can do with it:\n",
"\n",
"1. **compile it** and run it with Java\n",
"2. **translate** it to JavaScript and run it\n",
"\n",
"We are doing number 2 here. Note that there are some differences between these two methods:\n",
"\n",
"* The Java version can use Java libraries (like robot control)\n",
"* The Java version can create files, and do things on your computer\n",
"* The JavaScript version runs in your web browser\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 3. Sketch"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"There are two special functions: `draw()` and `setup()`:\n",
"\n",
"* put code in `setup()` that is to be run once, at the start of your program. \n",
"* put code in `draw()` that is to be run many times a second\n",
"\n",
"You don't have to use those two methods. For now, you can simply put code in the sketch outside of any function.\n",
"\n",
"Functions to explore:\n",
"\n",
"* size()\n",
"* background()\n",
"* point()\n",
"* line()\n",
"* triangle()\n",
"* rectangle()\n",
"* quad()\n",
"* ellipse()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 4. Draw by Numbers (DBN)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Here we will draw a circle in the draw() function by using the ellipse function.\n",
"\n",
"**What is a function?**"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
\n",
" Sketch #1: \n",
" \n",
"
\n",
"
\n",
" \n",
" \n",
" \n",
" \n",
"
\n",
"Sketch #1 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"void draw() {\n",
" ellipse(50, 50, 80, 80);\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"We can make the canvas larger by using the size() function inside the setup() function. size **takes** a width and a hight as **arguments**."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_2\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_2\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_2\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_2\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
\n",
" Sketch #2: \n",
" \n",
"
\n",
"
\n",
" \n",
" \n",
" \n",
" \n",
"
\n",
"Sketch #2 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"void setup() {\n",
" size(500, 500);\n",
"}\n",
"\n",
"void draw() {\n",
" ellipse(50, 50, 80, 80);\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"It would be nice to make the circle draw in the center with a size proportional to the size of the canvas."
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_14\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_14\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_14\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([\"http://cs.brynmawr.edu/~dblank/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_14\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"
\n",
" Sketch #14: \n",
" \n",
"
\n",
"
\n",
" \n",
" \n",
" \n",
" \n",
"
\n",
"Sketch #14 state:Loading... \n",
"\n"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"int width = 500;\n",
"int height = 500;\n",
"\n",
"void setup() {\n",
" size(width, height);\n",
"}\n",
"\n",
"void draw() {\n",
" ellipse(width/2, height/2, width, height);\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Team up with a partner and create a sketch that is a joint work. Don't cut and paste an example, but create the whole thing from scratch.\n",
"\n",
"When done, click on the Publish button in the toolbar. That will give you a URL that you can share with friends and family."
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Calysto Processing",
"name": "calysto_processing"
},
"language_info": {
"file_extension": ".pjs",
"mimetype": "text/x-processing",
"name": "java"
}
},
"nbformat": 4,
"nbformat_minor": 0
}